<template>
  <div class="app">
    <!-- <div ref='btn'></div> -->
    <!-- <button v-focus>ggg </button> -->
    <!-- {{ message | capitalize }} -->
    <About>
      <!-- <template v-slot="slotProps">
        {{ slotProps.aboutMsg}}
      </template> -->
      <!-- <template v-slot:default="slotProps">
        {{ slotProps.aboutMsg }}
      </template> -->
      <!-- 过一两个企鹅号v吃完饭 -->
    </About>
    <!-- <About @autoclick="fn"/> -->
    <!-- class -->
    <!-- <div :class="{st:false,ly:true}"></div> -->
    <!-- <div :class="[className,'123',newclass,'456']"></div> -->
    <!-- <div :class="[isActive ? hh1 : hh2]"></div> -->
    <!-- style -->
    <!-- <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">啦啦啦啦</div> -->
    <!-- <div :style="obj">嘿嘿嘿</div> -->
    <!-- vue计算属性和方法的异同 -->
    <!-- {{ipt()}}--{{iptt}}
   {{ipt()}}--{{iptt}}
   {{ipt()}}--{{iptt}}
   {{ipt()}}--{{iptt}} -->
    <!-- <input type="radio" v-model="ipt" value="男"> -->
    <!-- <input type="radio" v-model="ipt" value="女">--{{ipt}} -->
    <!-- <input type="checkbox" v-model="ipt" name="" id="" value="吃" />--{{ ipt }}
    <input type="checkbox" v-model="ipt" name="" id="" value="喝" />
    <input type="checkbox" v-model="ipt" name="" id="" value="玩" />
    <input type="checkbox" v-model="ipt" name="" id="" value="乐" /> -->
  </div>
</template>

<script>
import About from "./views/About";
export default {
  // mixins: [{},{},{}],

  data() {
    return {
      message: "stst",
      // ipt: [],
      //  age:'12',
      // isActive: false,
      // hh1: "qwe",
      // hh2: "asd",
      // className:'st',
      // newclass:'ly',
      // activeColor: "red",
      // fontSize: 30,
      obj: {
        fontSize: 10,
        color: "blue",
      },
    };
  },
  watch: {
    obj: {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
        console.log(val);
        console.log(oldval);
      },
    },
    asd(val) {
      console.log(val);
    },
    // message: "watchFn",
    // "obj.fontSize"(val, oldVal) {
    //   console.log(val);
    //   console.log(oldval);
    // },
    // message(val, oldval) {
    //   console.log(val);
    //   console.log(oldval);
    // },
  },
  methods: {
    watchFn(val, oldVal) {
      console.log(val);
      console.log(oldval);
    },
  },
  // 1、生命周期函数：
  //   1 > beforeCreate：在组件属性还未创建完成
  //       只是组件实例生成了，el和data并未初始化，什么都没有的状态
  //   2 > created：组件创建成功，但模板还没编译，dom不存在
  //       完成了data数据的初始化，属性计算成功，el没有
  //   3 > beforeMount：开始编译模板/开始生成html，还未编译成功
  //       完成了el和data的初始化，还未挂载
  //   4 > mounted：模板编译成功,并把实例挂载到dom元素上  可以操作dom
  //   /////////////////////////  数据更新时调用  //////////////////////////////////
  //   5 > beforeUpdate：修改之前
  //       数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  //   6 > updated：真实dom修改完成
  //   /////////  销毁，主组件永远不会被销毁，销毁哪个组件哪个组件调用  ////////////////
  //   7 > beforeDestroy：实例销毁之前
  //   8 > destroyed：销毁完成后调用
  mounted() {
    console.log(this.$refs.btn);
  },
  computed: {
    asd() {
      return 123;
    },
  },
  filters: {
    capitalize: function (value) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
  },
  // methods: {
  //   // fn(v){
  //   //   console.log(v);
  //   // }
  //   // ipt() {
  //   //   console.log("methods");
  //   // },
  // },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
  computed: {
    // iptt() {
    //   console.log("computed");
    // },
  },
  components: {
    About,
  },
};
</script>

<style scoped>
</style>